import React from "react";
import ReactDom from "react-dom"
import './08.css'
//列表渲染
class List extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            onePiece: [
                {
                    index: 0,
                    name:'路飞'
                },
                {
                    index: 1,
                    name:'索隆'
                },
                {
                    index: 2,
                    name:'娜美'
                },
                {
                    index: 3,
                    name:'乌索普'
                },
                {
                    index: 4,
                    name:'山治'
                },
                {
                    index: 5,
                    name:'乔巴'
                },
                {
                    index: 6,
                    name:'罗宾'
                },
                {
                    index: 7,
                    name:'弗兰奇'
                },
                {
                    index: 8,
                    name:'布鲁克'
                },
                {
                    index: 9,
                    name:'甚平'
                }]
        }
    }

    render() {
        let listItem = this.state.onePiece.map((item, index) => {
            return (
                <ListItem index={index + 1} name={item.name}/>
            )
        })
        return (
            <div>
                <h1>草帽海贼王成员大揭秘</h1>
                <ul>
                    {listItem}
                </ul>
            </div>
        )
    }
}

class ListItem extends React.Component {
    constructor(props) {
        super(props);
        this.click = this.click.bind(this)
    }

    click() {
        let content = 'name=' + this.props.name 
        alert(content)
    }

    render() {
        return (
            <li onClick={this.click}>
                <h4>登场顺序：{this.props.index}</h4>
                <p>人物：{this.props.name}</p>
                <hr/>
            </li>
        )
    }


}

ReactDom.render(
    <List/>,
    document.querySelector('#root')
)